<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>iframe模拟沙箱</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="panels-container">
        <div class="panel" id="html-panel">
          <div class="panel-header">HTML</div>
          <div class="editor-wrapper">
            <div class="line-numbers">1</div>
            <textarea
              id="html-content"
              class="panel-content"
              spellcheck="false"
              autocapitalize="off"
              autocorrect="off"
              placeholder="<!-- 在此处编写 HTML 代码 -->"
            ></textarea>
          </div>
        </div>

        <div class="resizer-vertical"></div>

        <div class="panel" id="css-panel">
          <div class="panel-header">CSS</div>
          <div class="editor-wrapper">
            <div class="line-numbers">1</div>
            <textarea
              id="css-content"
              class="panel-content"
              spellcheck="false"
              autocapitalize="off"
              autocorrect="off"
              placeholder="/* 在此处编写 CSS 样式 */"
            ></textarea>
          </div>
        </div>

        <div class="resizer-vertical"></div>

        <div class="panel" id="js-panel">
          <div class="panel-header">JS</div>
          <div class="editor-wrapper">
            <div class="line-numbers">1</div>
            <textarea
              id="js-content"
              class="panel-content"
              spellcheck="false"
              autocapitalize="off"
              autocorrect="off"
              placeholder="// 在此处编写 JavaScript 逻辑"
            ></textarea>
          </div>
        </div>
      </div>

      <div class="resizer-horizontal"></div>

      <div class="iframe-container">
        <iframe id="previewFrame" sandbox="allow-scripts allow-same-origin"></iframe>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>
